<template>
	<view 
	@touchstart='handlestart'
	@touchend='handleend'
	 
	>
		<slot></slot>
	</view>
</template>	

<script>
	export default {
		name:"slide",
		data() {
			return {
				startTime: 0,
				startX: 0,
				startY: 0
			};
		},
		methods: {
			handlestart(event) {
				this.startTime = Date.now()
				this.startX = event.changedTouches[0].clientX
				this.startY = event.changedTouches[0].clientY
			},
			handleend(event) {
				const endTime = Date.now()
				const endX = event.changedTouches[0].clientX
				const endY = event.changedTouches[0].clientY
				//判断时长是否合法
				if(endTime - this.startTime > 2000) {
					return;
				}
				//滑动方向
				let direction = ''
				//判断滑动距离是否合法，再判断方向
				if(Math.abs(endX - this.startX) > 10 && Math.abs(endY - this.startY) < 10) {
					direction = endX - this.startX > 0? "right": "left"
				} else {
					return
				}
				// console.log(direction)
				this.$emit("swiperAction",{direction})
			}
		}
	}
</script>

<style>

</style>
